<template>
	<div>
		<el-card>
			<div class="topFun">
				<el-form :inline="true" :model="queryData" class="demo-form-inline">
					<el-form-item label="菜单名称">
						<el-input v-model="queryData.query" placeholder="请输入菜单名称" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmitData(1)">搜索</el-button>
					</el-form-item>
				</el-form>
				<el-button type="primary" @click="dialogVisible = true">新增菜单</el-button>
			</div>
			<el-table :data="pageData.list" border style="width: 100%">
				<el-table-column prop="date" label="菜单图标" width="85">
					<template #default="scpot">
						<el-image
							style="width: 50px; height: 50px; border-radius: 5px"
							:src="scpot.row.icon"
							fit="cover"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="菜单名称" />
				<el-table-column prop="link" label="菜单路径" />
				<el-table-column prop="isTabBar" label="TabBar">
					<template #default="scpot">
						{{ scpot.row.isTabBar ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column prop="isShow" label="是否显示">
					<template #default="scpot">
						{{ scpot.row.isShow ? '是' : '否' }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="操作" width="110">
					<template #default="scpot">
						<el-button link type="primary" @click="getAppMenuOneMsg(scpot.row.id)">
							编辑
						</el-button>
						<el-button link type="danger" @click="deleteMenu(scpot.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination
				:current="queryData.pageNum"
				:total="pageData.total"
				:pageSize="queryData.pageSize"
				@paginaClick="onSubmitData"
			></pagination>
		</el-card>
		<el-dialog v-model="dialogVisible" title="编辑菜单" width="500">
			<el-form :model="editMsg" label-width="70px" class="demo-form-inline">
				<el-form-item label="菜单名称">
					<el-input v-model="editMsg.name" placeholder="请输入菜单名称" />
				</el-form-item>
				<el-form-item label="菜单图标" v-if="editMsg.icon">
					<el-image
						style="width: 50px; height: 50px; border-radius: 5px"
						:src="editMsg.icon"
						fit="cover"
					/>
				</el-form-item>
				<el-form-item label="图标地址">
					<el-input v-model="editMsg.icon" placeholder="请输入图标地址" />
				</el-form-item>
				<el-form-item label="菜单路径">
					<el-input v-model="editMsg.link" placeholder="请输入菜单路径" />
				</el-form-item>
				<el-form-item label="TabBar">
					<el-switch
						v-model="editMsg.isTabBar"
						inline-prompt
						active-text="是"
						inactive-text="否"
					/>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-switch
						v-model="editMsg.isShow"
						inline-prompt
						active-text="是"
						inactive-text="否"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="onSubmit">确定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { getAppMenus, getAppMenuOne, updateMenu, addMenu, deleteMenuOne } from '@/utils/api';
import { ElMessage, ElMessageBox } from 'element-plus';
// const query: any = reactive({});
const pageData: any = ref({});
const queryData = reactive({
	query: '',
	pageNum: 1,
	pageSize: 10,
});
const getMenuList = () => {
	getAppMenus(queryData).then((res: any) => {
		pageData.value = res.data;
	});
};
getMenuList();
const onSubmitData = (val: number) => {
	queryData.pageNum = val;
	getMenuList();
};

const editMsg: any = ref({
	isShow: true,
	isTabBar: false,
});
const dialogVisible = ref(false);
const getAppMenuOneMsg = (id: number | string) => {
	getAppMenuOne(id).then((res: any) => {
		editMsg.value = res.data;
		dialogVisible.value = true;
	});
};

const onSubmit = () => {
	if (editMsg.value.id) {
		updateMenu(editMsg.value).then((res: any) => {
			ElMessage.success('修改成功');
			getMenuList();
			dialogVisible.value = false;
			editMsg.value = {};
		});
	} else {
		addMenu(editMsg.value).then((res: any) => {
			ElMessage.success('添加成功');
			getMenuList();
			dialogVisible.value = false;
			editMsg.value = {};
		});
	}
};
const deleteMenu = (id: number | string) => {
	ElMessageBox.confirm('确定要删除该菜单吗?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		deleteMenuOne(id).then((res: any) => {
			if (queryData.pageNum > 1 && pageData.value.list.length == 1) {
				queryData.pageNum -= 1;
			}
			ElMessage.success('删除成功');
			getMenuList();
		});
	});
};
watch(dialogVisible, (val: any) => {
	if (!val) {
		editMsg.value = {
			isShow: true,
			isTabBar: false,
		};
	}
});
</script>
